<template>
  <view>
    <view class="movie-position">
      <view style="display: flex">
        <uni-icons
            type="left"
            size="24"
            @click="goBack()"
            style="margin-right: 20rpx"
        ></uni-icons>
        <view class="position-text">{{ cinemaInfo.cinemaName }}</view>
      </view>
      <!-- <view class="position-item">
				<view class="item-texts">{{cinemaInfo.cinemaAddress}}</view>
				<view class="item-img-list">
					<image src="../../static/images/collection-icon.png" class="collion"></image>
					<image src="../../static/images/moivew-location.png" class="locaion-img"></image>
				</view>
			</view> -->
    </view>
    <!-- 轮播盒子 start -->
    <view class="swiper_main">
      <!-- <image
        class="background-img-vague"
        style="width: 100vw"
        mode="widthFix"
        :src="chooseMovice.image"
      ></image> -->
      <image
          class="background-img-vague"
          style="width: 100vw"
          mode="widthFix"
          :src="chooseMovice.posterUrl"
      ></image>
      <view class="wrap">
        <swipers
            :list="movieList"
            height="260"
            mode="none"
            name="posterUrl"
            :autoplay="false"
            img-mode="scaleToFill"
            class="swiper_bg"
            :effect3d="true"
            bg-color="none"
            :circular="false"
            effect3d-previous-margin="280"
            @click="setBackground($event, false)"
            @change="setBackground($event, true)"
            :current="swiperCurrent"
        ></swipers>
      </view>
      <div class="box"></div>
    </view>
    <!-- 轮播盒子 end -->

    <view class="moive-name">{{ chooseMovice.filmName }}</view>
    <view class="moive-info"
    >{{ chooseMovice.duration }}分钟{{
        chooseMovice.filmType
      }}{{ chooseMovice.cast }}
    </view
    >

    <view class="moive-tab-list">
      <view
          class="tabs-list-item"
          :class="{ 'tab-sel': index == tabIndexs }"
          v-for="(value, index) in tabLists"
          :key="index"
          @click="getTimeTab(value, index)"
      >
        {{ value.showDate }}
        <view class="bottoms" v-if="index == tabIndexs"></view>
      </view>
    </view>

    <view class="ticket-list" v-for="(value, index) in timeList" :key="index">
      <view style="width: 79%">
        <view class="ticet-left">
          <view style="display: flex; align-items: center">
            <text class="left-time">{{ getTime(value.showTime) }}</text>
            <text class="left-type">{{ value.planType }}</text>
          </view>
          <view style="display: flex; align-items: center">
            <view class="ret-price">
              <text>￥</text>
              {{ value.price }}
            </view>
          </view>
        </view>
        <view class="ticet-left" style="margin-top: 20rpx">
          <view class="ticet-booms">
            <text>时长:{{ value.duration }}分钟</text>
            <text style="margin-left: 25rpx">{{ value.hallName }}</text>
          </view>
          <!-- <view class="ticet-boom-ret">
						<view class="sheng-text">省</view>
						<view class="sheng-pirce">¥{{province(value.showPrice,value.userPrice)}}</view>
					</view> -->
        </view>
      </view>
      <view class="buy-btns" @click="getGou(value)">购票</view>
    </view>

    <view
        v-if="isLoad && timeList.length == 0"
        style="text-align: center; padding-top: 30rpx; font-size: 28rpx"
    >暂无排片！
    </view>
  </view>
</template>

<script>
// import {filmList,filmScheduling} from "@/api/film.js"
import swipers from "./components/u-swiper.vue";
import config from "@/utils/config.js";
import sheep from "@/sheep";

export default {
  components: {swipers},
  data() {
    return {
      cinemaid: null,
      cityid: null,
      filmName: null,
      movieList: [],
      //选中的电影
      chooseMovice: {
        movieId: "",
        duration: "",
        movieType: "",
        cast: "请稍等",
      },
      //swiper默认选中
      swiperCurrent: null,
      moveindex: 0,
      // 下面的电影票
      tabIndexs: 0,
      cinemaInfo: {}, //影院信息
      tabLists: [],
      timeList: [], //排期数据
      isLoad: false,
    };
  },
  onLoad(option) {
    console.log('option.filmName: ',option.filmName);
    this.cinemaid = option.id; //电影院id
    this.cityid = option.cityid; //城市id
    this.filmName = option.filmName; //名
    const movie = JSON.parse(decodeURIComponent(option.movie));
    this.cinemaInfo = JSON.parse(decodeURIComponent(option.item));
    this.getFilmList().then(() => {
      // 在 getFilmList 完成后，设置 swiperCurrent 和 chooseMovice
      this.movieList.forEach((movie, index) => {
        if (movie.movieName === this.filmName) {
          this.moveindex = index;
        }
      });
      this.swiperCurrent = this.moveindex;
      this.chooseMovice = this.movieList[this.moveindex];
      this.getCinemaShowList(this.cinemaInfo.id, movie.id)
    });
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async getFilmList() {
      const res = await sheep.$api.movie.filmList({
        cityId: this.cityid,
        cinemaId: this.cinemaid,
      });
      if (res.state === 200) {
        console.log("获取影院的电影", res.data);
        const newMovies = res.data.map((item) => ({
          movieId: item.id, // 映射 movieId
          duration: item.duration, // 映射 duration
          movieType: item.filmType, // 映射 movieType 名
          cast: item.cast, // 映射 cast
          movieName: item.filmName, // 映射 movieName
          posterUrl: item.image, // 映射 posterUrl
        }));

        // 将新数据添加到 movieList 中
        this.movieList = newMovies;
      }
    },
    async getCinemaShowList(cinemaId, filmId) {
      const res = await sheep.$api.movie.cinemaShowList({
        cinemaId: cinemaId,
        filmId: filmId,
      });
      if (res.code === 200) {
        let objData = res.data;
        objData = objData.map((item) => {
          item.showDate = item.showDate.substr(5);
          return item;
        });
        const grouped = objData.reduce((acc, obj) => {
          const key = obj.showDate;
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(obj);
          return acc;
        }, {});
        for (let key in grouped) {
          if (grouped.hasOwnProperty(key)) {
            this.tabLists.push({
              showDate: key,
              list: grouped[key],
            });
          }
        }
        // 获取当前时间的 timestamp
        const now = Date.now();

        if (this.tabLists && this.tabLists.length > 0) {
          this.timeList = this.tabLists[0].list.filter((item) => {
            // 获取 showTime 的时间戳
            const showTime = new Date(item.showTime).getTime();
            // 计算时间差（单位：毫秒）
            const timeDiff = showTime - now;
            // 判断是否大于半小时（30分钟 = 30 * 60 * 1000 毫秒）
            return timeDiff >= 30 * 60 * 1000;
          });
          console.log("this.tabLists[0].list", this.tabLists[0].list);
        }
      }
    },
    // 切换轮播改变背景
    setBackground(index, status) {
      console.log(status);
      this.swiperCurrent = index;
      this.chooseMovice = this.movieList[index];
      console.log("当前索引下的 movieId:", this.movieList[index].movieId);
      if (status) {
        this.timeList = []; //排期数据
        this.tabLists = [];
        this.getCinemaShowList(
            this.cinemaInfo.id,
            this.movieList[index].movieId
        );
      }
      // this.getScheduling()
    },
    getTimeTab(data, index) {
      if (this.tabIndexs != index) {
        this.tabIndexs = index;
        this.timeList = data.list;
      }
    },
    getTime(timestamp) {
      // 创建一个Date对象
      const date = new Date(timestamp);
      // 获取小时和分钟
      const hours = date.getHours().toString().padStart(2, "0"); // 使用padStart确保是两位数
      const minutes = date.getMinutes().toString().padStart(2, "0"); // 使用padStart确保是两位数
      // 返回格式化后的字符串
      return `${hours}:${minutes}`;
    },
    getGou(data) {
      // console.log("this.cinemaInfo.cinemaId", data);
      let _this = this;
      uni.navigateTo({
        url:
            "/pages/movie/Seat?item=" +
            encodeURIComponent(JSON.stringify(data)) +
            "&cinemaId=" +
            data.cinemaId +
            "&chooseMovice=" +
            encodeURIComponent(JSON.stringify(_this.chooseMovice)),
        success(res) {
          // res.eventChannel.emit('moviceDataFrom', {
          // 	data: _this.chooseMovice
          // })
        },
      });
    },
    province(original, price) {
      let val = original - price;
      return Math.floor(val * 100) / 100;
    },
  },
};
</script>

<style lang="scss" scoped>
// 轮播图中间
.swiper_main {
  position: relative;
  height: 324rpx;
  overflow: hidden;

  .background-img-vague {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    // transform: translateX(-50%);
    filter: blur(15px);
    -webkit-filter: blur(15px);
  }

  ::v-deep .u-swiper-item {
    width: 193rpx !important;
    height: 260rpx !important;
  }

  // 影院背景图
  .moviebg {
    // width: 100%;
    // height: 100%;
    // filter: blur(10rpx);
  }

  .wrap {
    position: absolute;
    left: 0;
    top: 26rpx;
    right: 0;
    margin: 0 auto;
  }

  .box {
    width: 0;
    height: 0;
    border: 10rpx solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(135deg);
    position: absolute;
    bottom: -10rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}

.movie-position {
  padding: 30rpx 32rpx;
  margin-top: 100rpx;

  .position-text {
    color: #2d3039;
    font-size: 32rpx;
    font-weight: 550;
  }

  .position-item {
    display: flex;
    margin-top: 10rpx;
  }

  .item-texts {
    color: #636775;
    font-size: 24rpx;
    width: 72%;
  }

  .item-img-list {
    margin-left: auto;
    display: flex;

    // align-items: center;
    .collion {
      width: 48rpx;
      height: 48rpx;
      margin-right: 50rpx;
    }

    .locaion-img {
      width: 44rpx;
      height: 44rpx;
    }
  }
}

.moive-name {
  text-align: center;
  margin-top: 30rpx;
  color: #2d3039;
  font-size: 36rpx;
  font-weight: 600;
}

.moive-info {
  text-align: center;
  margin-top: 14rpx;
  color: #636775;
  font-size: 24rpx;
}

.moive-tab-list {
  margin-top: 40rpx;
  padding: 24rpx 12rpx;
  border-bottom: 2rpx solid #dfe0e2;
  overflow-x: auto;
  white-space: nowrap;
  width: auto;
  overflow-y: hidden;

  .tabs-list-item {
    padding: 0rpx 20rpx;
    display: inline-block;
    position: relative;
    color: #636775;
    font-size: 28rpx;
  }

  .tab-sel {
    color: #fe602b !important;
    font-size: 28rpx;
    font-weight: 550;
  }

  .bottoms {
    position: absolute;
    bottom: -30rpx;
    right: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52rpx;
    height: 8rpx;
    background-color: #fe602b;
    // border-radius: 5rpx 5rpx 0px 0px;
  }
}

.ticket-list {
  margin: 0rpx 32rpx;
  padding: 38rpx 0rpx;
  border-bottom: 2rpx solid #e0e1e3;
  display: flex;
  align-items: center;

  .ticet-left {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-time {
      color: #2d3039;
      font-size: 42rpx;
    }

    .left-type {
      color: #2d3039;
      font-size: 28rpx;
      margin-left: 32rpx;
    }
  }

  .ret-price {
    color: #fe602b;
    font-size: 42rpx;
    font-weight: 550;

    text {
      font-size: 28rpx;
    }
  }

  .ret-yuans {
    color: #a6a8ae;
    font-size: 28rpx;
    margin-left: 13rpx;
    text-decoration: line-through;
  }
}

.ticet-booms {
  color: #a6a8ae;
  font-size: 24rpx;
}

.ticet-boom-ret {
  display: flex;
  align-items: center;

  .sheng-text {
    padding: 0rpx 8rpx;
    height: 30rpx;
    line-height: 30rpx;
    background-color: #3db97c;
    border-radius: 4rpx;
    color: #ffffff;
    font-size: 20rpx;
    text-align: center;
    margin-right: 12rpx;
  }

  .sheng-pirce {
    color: #a6a8ae;
    font-size: 24rpx;
  }
}

.buy-btns {
  width: 110rpx;
  height: 58rpx;
  text-align: center;
  line-height: 58rpx;
  background: linear-gradient(207deg, #ff9272 0%, #fc5421 100%);
  border-radius: 30rpx;
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 550;
  margin-left: auto;
}
</style>
